<!--
 * @Author: 汐雨
 * @Date: 2021-03-27 12:50:23
 * @LastEditTime: 2021-03-27 23:46:39
 * @FilePath: \uni-app\src\subpkg\search\search.vue
-->
<template>
  <view>
    <view class="search-box">
      <uni-search-bar @input="input"
        :radius="100"
        :cancelButton="none"
        :focus="true"></uni-search-bar>
    </view>

    <!-- 搜索建议列表 -->
    <view class="sugg-list"
      v-if="searchList.length !== 0">
      <view class="sugg-item"
        v-for="(item, i) in searchList"
        :key="i"
        @click="gotoDetail(item)">
        <view class="sugg-name">
          {{item.goods_name}}
        </view>
        <uni-icons type="arrowright"
          size="16"></uni-icons>
      </view>
    </view>

    <!-- 搜索历史 -->
    <view class="history-box"
      v-else>
      <!-- 标题区域 -->
      <view class="history-title">
        <text>搜索历史</text>
        <uni-icons type="trash"
          size="17"
          @click="clean"></uni-icons>
      </view>
      <!-- 列表区域 -->
      <view class="history-list">
        <uni-tag :text="item"
          v-for="(item, i) in histories"
          :key="i"
          @click="gotoGoodsList(item)"></uni-tag>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  // 页面的初始数据
  data () {
    return {
      // 输入框防抖
      timer: null,
      // 输入的值
      kw: '',
      // 搜索的结果列表
      searchList: [],
      //
      historyList: []
    }
  },
  // 生命周期函数--监听页面加载
  onLoad: function (options) {
  },
  methods: {
    // input 输入事件的处理函数
    input (e) {
      clearTimeout(this.timer)

      this.timer = setTimeout(() => {
        console.log(e);
        this.kw = e

        this.getSearchList()
      }, 500)
    },

    //  获取搜索结果的方法
    async getSearchList () {
      // 判断搜索的结果是否为空
      if (this.kw.length === 0) {
        this.searchList = []
        return
      }
      const { data: res } = await uni.$http.get('/api/public/v1/goods/qsearch', { query: this.kw })
      if (res.meta.status !== 200) return uni.$showMsg()


      this.searchList = res.message

      this.saveSearchHistory()
    },

    //
    gotoDetail (item) {
      uni.navigateTo({
        url: '/subpkg/goods_detail/goods_detail?goods_id=' + item.goods_id
      })
    },

    // 保存搜索记录
    saveSearchHistory () {
      // this.historyList.push(this.kw)

      const set = new Set(this.historyList)
      set.delete(this.kw)
      set.add(this.kw)

      this.historyList = Array.from(set)

      // 对历史搜索记录，进行持久化处理
      uni.setStorageSync('kw', JSON.stringify(this.historyList))
    },

    // 清空历史记录
    clean () {
      this.historyList = []
      uni.setStorageSync('kw', '[]')
    },

    //
    gotoGoodsList (kw) {
      uni.navigateTo({
        url: '/subpkg/goods_list/goods_list?query=' + kw
      })
    }
  },

  computed: {
    histories () {
      return [...this.historyList].reverse()
    }
  },
  // 生命周期函数--监听页面初次渲染完成
  onReady: function () {
    this.historyList = JSON.parse(uni.getStorageSync('kw') || '[]')
  },
  // 生命周期函数--监听页面显示
  onShow: function () {
  },
  // 生命周期函数--监听页面隐藏
  onHide: function () {
  },
  // 生命周期函数--监听页面卸载
  onUnload: function () {
  },
  // 页面相关事件处理函数--监听用户下拉动作
  onPullDownRefresh: function () {
  },
  // 页面上拉触底事件的处理函数
  onReachBottom: function () {
  },
  // 用户点击右上角分享
  onShareAppMessage: function () {
  },
}
</script>

<style lang="scss" scoped>
.search-box {
  background-color: #c00000;
  position: sticky;
  top: 0;
  z-index: 999;
}

.sugg-list {
  padding: 0 5px;

  .sugg-item {
    font-size: 12px;
    padding: 13px;
    border-bottom: 1px solid #efefef;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .sugg-name {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      margin-right: 3px;
    }
  }
}

.history-box {
  padding: 0 5px;

  .history-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 40px;
    font-size: 13px;
    border-bottom: 1px solid #efefef;
  }

  .history-list {
    display: flex;
    flex-wrap: wrap;

    .uni-tag {
      margin-top: 5px;
      margin-right: 5px;
    }
  }
}
</style>
